<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      left-arrow
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top ">
      <div class=" pb-1">
        <div class="mlr-25">
          <content-search
            theme="1"
            :search-val="searchVal"
            :placeholder="searchTips"
            @clear="clear"
            @getVal="getVal"
            @search="search"
          />
        </div>
      </div>
      <div class="mlr-25 ">
        <ul class="">
          <li v-for="(item, index) in productList" :key="index" class="mtb-20  br-10 ofh bg-white"
            @click="goDetail(item.ID)">
            <div>
              <div class="plr-25 pt-10 bg-fa">
                <p class="color-black lh-lg fw-500 fs-28" v-if="item.RealName">{{item.RealName}}（{{item.CardNumber}}）</p>
              </div>
              <div class="flex ptb-30 plr-25">
                <img-box class="is-160 br-10 flex-s-0" :img-url="item.ProductImg" />
                <div class="productItem-detail ml-20 flex-1">
                  <p class="text-show-line-2 mb-10 color-dark fs-28">{{item.ProductName}}</p>
                  <p class="fs-28 color-gray-light" v-if="item.UserProductSkuList.length > 0 && item.UserProductSkuList[0].Sku">货号：{{item.UserProductSkuList[0].Sku}}</p>
                  <p class="fs-28 color-gray-light" v-if="item.UnitName">规格：{{item.UnitName}}</p>
                  <p class="productItem-p-left fs-28" v-if="item.UserProductSkuList.length > 0">默认价：<span class="fw-b">￥{{item.UserProductSkuList[0].SalePrice}}</span> <span class="pl-30">指定价：<span class="fw-b color-red">￥{{item.UserProductSkuList[0].UserPrice}}</span></span></p>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <no-data v-if="productList.length === 0" />
        <p v-if="end===true&&productList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import contentSearch from 'components/contentSearch'
import noData from 'components/noData'
import productList from 'components/productList'
import datetimeFilter from 'components/datetimeFilter'
import { GetWriteoffRecordPage } from 'api/writeoff'
import { GetUserPriceListByEmployee } from 'api/product'
import imgBox from 'components/imgBox'
export default {
  components: {
    contentSearch,
    noData,
    productList,
    datetimeFilter,
    imgBox
  },
  data() {
    return {
      bgWhite: true,
      searchVal: '',
      // 时间选择框显示
      timeStartSelect: false,
      timeEndSelect: false,

      GetWriteoffRecordPageRequest: {
        PageIndex: 1,
        PageSize: 10,
      },

      // 记录列表
      productList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false,
			title: '一客一价记录',
			searchTips: '输入会员名称',
			type: 0
    }
  },
  created() {
		if(this.$route.query.type == 2){
			this.type = 2
			this.artificer = true
			this.title = '服务记录'
			this.searchTips = '请输入客户/手机号/订单号'
		}
    this.GetWriteoffRecordPage()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    search(val) {
      this.scollRequest = true
      this.end = false
      this.GetWriteoffRecordPageRequest.SearchKey = val
      this.GetWriteoffRecordPageRequest.PageIndex = 1
      this.productList = []
      this.GetWriteoffRecordPage()
    },
    clear() {
      this.searchVal = undefined
    },
    getVal(val) {
      this.searchVal = val
    },
    openDatetimeSelect() {
      debugger
      this.timeStartSelect = true
    },
    onStartConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = true
    },
    onEndConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },
    close() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },

    // 时间筛选
    getData(value) {
      this.scollRequest = true
      this.end = false
      this.clear()

      this.GetWriteoffRecordPageRequest.PageIndex = 1
      this.GetWriteoffRecordPageRequest.searchKey = undefined
      this.GetWriteoffRecordPageRequest.StartTime = value.startDate ? value.startDate.replace(/\./g, '-') : null
      this.GetWriteoffRecordPageRequest.EndTime = value.endDate ? value.endDate.replace(/\./g, '-') : null
      this.productList = []
      this.GetWriteoffRecordPage()
    },
    GetWriteoffRecordPage() {
      GetUserPriceListByEmployee(this.GetWriteoffRecordPageRequest).then(res => {
        if (res) {
          if (res.Data.Data.length && res.Data.Data.length > 0) {
            console.log(1111111)
            res.Data.Data.forEach(tem => {
              tem.Id = tem.ID
              this.productList.push(tem)
            })
          }
          this.totalAmout = res.Data.TotalAmout
          this.scollRequest = true
        }
      })
    },

    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (_this.$utils.getScrollHeight() - _this.$utils.getClientHeight() - _this.$utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          if (_this.GetWriteoffRecordPageRequest.PageIndex < _this.totalAmout) {
            _this.GetWriteoffRecordPageRequest.PageIndex++
            _this.GetWriteoffRecordPage()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.van-hairline--bottom::after{
  border-bottom-width:0;
}
.color-red{
  color: #F1270C;
}
</style>
